<template>
  <div>
    <div>
      <van-nav-bar>
        <template #left>
          <div class="left-nav">
            <img src="../assets/images/home_active.png" alt="" />
            Luckin Coffee
          </div>
        </template>
        <template #right>
          <div class="right-nav" @click="stroll">先逛一逛</div>
        </template>
      </van-nav-bar>
    </div>
    <div class="banner">
      <h3>欢迎回来!</h3>
      <p>Please login to your accounts</p>
    </div>
    <van-form @submit="login">
      <van-field
        v-model="logininfo.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        autocomplete="off"
      />
      <van-field
        v-model="logininfo.password"
        :type="loginflag == false ? 'password' : 'text'"
        name="密码"
        label="密码"
        placeholder="密码"
        :right-icon="loginflag == false ? 'closed-eye' : 'eye-o'"
        @click-right-icon="clickToggle('loginflag')"
        autocomplete="off"
      />
      <div class="forgot" >
        <span @click="findPwd">忘记密码?</span>
        </div>
      <div class="allbutton">
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </div>
    </van-form>
    <van-button class="zhuce-btn" round block type="info" native-type="submit" @click="showPopup"
      >注册</van-button
    >
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
      closeable
    >
      <div class="zhuce">
        <van-form @submit="zhuce">
          <van-field
            v-model="zhuceinfo.phone"
            name="手机号"
            label="手机号"
            placeholder="请输入正确的手机号"
            autocomplete="off"
          />
          <van-field
            v-model="zhuceinfo.password"
            :type="zhuceflag == false ? 'password' : 'text'"
            name="密码"
            label="密码"
            placeholder="请输入字母开头的6-16位密码"
            :right-icon="zhuceflag == false ? 'closed-eye' : 'eye-o'"
            @click-right-icon="clickToggle('zhuceflag')"
            autocomplete="off"
          />
          <van-field
            v-model="zhuceinfo.nickName"
            name="昵称"
            label="昵称"
            placeholder="请输入规范的昵称"
            autocomplete="off"
          />

          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
 
<van-popup v-model="show1" position="bottom" :style="{ height: '30%' }" />
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      show: false,
      show1: false,
      zhuceflag: false,
      loginflag: false,
      logininfo: {
        phone: "",
        password: "",
      },
      zhuceinfo: {
        nickName: "",
        password: "",
        phone: "",
      },
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    clickToggle(flag) {
      this[flag] = !this[flag];
    },
    // 注册
    zhuce() {
      // 手机号码效验
      let phoneCheck = /^1[3-9]\d{9}$/;
      if (!phoneCheck.test(this.zhuceinfo.phone)) {
        this.$toast("请输入正确的手机号码");
        return;
      }
      // 密码效验
      let psdCheck = /^[A-Za-z][A-Za-z\d]{5,15}$/;
      if (!psdCheck.test(this.zhuceinfo.password)) {
        this.$toast("请输入正确的密码");
        return;
      }
      // 昵称效验
      let nameCheck = /^[A-Za-z\u4e00-\u9fa5]{1,10}$/;
      if (!nameCheck.test(this.zhuceinfo.nickName)) {
        this.$toast("请输入正确的昵称");
        return;
      }
      

      this.axios({
        method: "POST",
        url: "/register",
        data: this.zhuceinfo,
      })
        .then((res) => {
          
          this.$toast(res.data.msg);
          if (res.data.code === 100) {
            this.show = false;
          }
        })
        .catch((err) => {
          
        });
    },
    // 登录
    login() {
      // 手机号码效验
      let phoneCheck = /^1[3-9]\d{9}$/;
      if (!phoneCheck.test(this.logininfo.phone)) {
        this.$toast("请输入正确的手机号码");
        return;
      }
      // 密码效验
      let psdCheck = /^[A-Za-z][A-Za-z\d]{5,15}$/;
      if (!psdCheck.test(this.logininfo.password)) {
        this.$toast("请输入正确的密码");
        return;
      }
      this.axios({
        method: "POST",
        url: "/login",
        data: this.logininfo,
      })
        .then((res) => {
          
          this.$toast(res.data.msg);
          if(res.data.code === 200){
            this.$cookies.set('TOKEN',res.data.token,'10d')  
            setTimeout(() => {
              this.$router.push({name: 'Home'});
            }, 2000)
          }
        })
        .catch((err) => {
          
        });
    },
    // 先逛一逛
    stroll(){
      this.$router.push({name:"Home"})
    },
    // 找回密码
    findPwd(){
      this.$router.push({name:"FindPwd"})
      
    }
  },
};
</script>

<style lang="less" scoped>
.left-nav {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: rgb(12, 52, 186);
  img {
    width: 25px;
    height: 25px;
    margin-right: 15px;
    vertical-align: middle;
  }
}
.banner {
  padding: 40px 25px;
  h3 {
    font-size: 22px;
    color: gray;
  }
  p {
    font-size: 16px;
    color: gray;
  }
}
.forgot {
  padding: 25px 15px 15px 300px;
}
.allbutton {
  .van-button {
    margin: 20px 0;
    background-color: rgb(12, 52, 186);
    border: 1px solid rgb(12, 52, 186);
  }
}
.zhuce-btn{
    border: 1px solid rgb(12, 52, 186);
    width: 345px;
    margin: 20px 15px;
    background-color: white;
    color: rgb(12, 52, 186);
}
.zhuce {
  padding-top: 45px;
  .van-button {
    background-color: rgb(12, 52, 186);
    border: none;
  }
}
</style>